<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<title>重置密码</title>
	<script>
		(function(){
			var docEl = document.documentElement;
			var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			function recalc(){
				var clientWidth = docEl.clientWidth;
				if(!clientWidth) return;
				docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
			}
			if(!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
			recalc();
		})();
	</script>
	<link rel="stylesheet" href="/skin/css/index.css" />
	<script src="/user/js/jquery.js"></script>
	<script src="/skin/js/toast.js"></script>
	<style>
		:root {
			--card-bg: #ffffff;
			--page-bg: #f3f5f8;
			--text-primary: #111827;
			--text-muted: #6b7280;
			--line: #e5e7eb;
			--primary: #253043;
		}
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding-bottom: 0;
			background: var(--page-bg);
			font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
			color: var(--text-primary);
		}
		a {
			text-decoration: none;
			color: inherit;
			-webkit-tap-highlight-color: transparent;
		}
		header {
			background: var(--card-bg);
			box-shadow: 0 0.02rem 0.08rem rgba(15, 23, 42, 0.06);
		}
		.head-b {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 0.56rem;
			padding: 0 0.16rem;
		}
		.head-b h1 {
			font-size: 0.18rem;
			font-weight: 600;
			margin: 0;
			color: var(--text-primary);
		}
		.main {
			padding: 0.2rem 0.16rem 0.32rem;
		}
		.form-card {
			background: var(--card-bg);
			border-radius: 0.12rem;
			padding: 0.24rem 0.2rem 0.28rem;
			box-shadow: 0 0.08rem 0.24rem rgba(15, 23, 42, 0.08);
		}
		.form-title {
			font-size: 0.2rem;
			font-weight: 700;
			margin-bottom: 0.08rem;
		}
		.form-subtitle {
			font-size: 0.13rem;
			color: var(--text-muted);
			margin-bottom: 0.24rem;
		}
		.form-group {
			margin-bottom: 0.2rem;
		}
		.form-label {
			display: block;
			font-size: 0.13rem;
			color: var(--text-muted);
			margin-bottom: 0.08rem;
		}
		.input-field {
			width: 100%;
			height: 0.48rem;
			border-radius: 0.08rem;
			border: 0.01rem solid var(--line);
			padding: 0 0.16rem;
			font-size: 0.15rem;
			background: #f9fafb;
			outline: none;
		}
		.input-field:focus {
			border-color: var(--primary);
			background: #fff;
			box-shadow: 0 0 0 0.02rem rgba(37, 48, 67, 0.08);
		}
		.input-with-action {
			display: flex;
			align-items: center;
			gap: 0.12rem;
		}
		.code-btn {
			flex-shrink: 0;
			width: 1.12rem;
			height: 0.42rem;
			border-radius: 0.08rem;
			border: 0;
			background: var(--primary);
			color: #fff;
			font-size: 0.13rem;
			font-weight: 600;
			cursor: pointer;
			transition: opacity 0.2s ease;
		}
		.code-btn:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		.submit-btn {
			width: 100%;
			height: 0.5rem;
			border-radius: 0.1rem;
			border: 0;
			background: linear-gradient(132deg, #253043 0%, #171e2a 100%);
			color: #fff;
			font-size: 0.16rem;
			font-weight: 600;
			margin-top: 0.12rem;
			cursor: pointer;
			box-shadow: 0 0.12rem 0.24rem rgba(37, 48, 67, 0.28);
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}
		.submit-btn:active {
			transform: translateY(0.01rem);
			box-shadow: 0 0.08rem 0.16rem rgba(37, 48, 67, 0.24);
		}
		.extra-links {
			margin-top: 0.24rem;
			text-align: center;
			font-size: 0.13rem;
			color: var(--text-muted);
			display: flex;
			justify-content: center;
			gap: 0.12rem;
		}
		.extra-links a {
			color: var(--primary);
			font-weight: 600;
		}
	</style>
</head>
<body>
	<header id="header">
		<section class="head-b head-b1">
			<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png" alt="返回" /></a></span>
			<h1 id="t0">重置密码</h1>
			<div class="u-right"></div>
		</section>
	</header>
	<div class="main">
		<div class="form-card">
			<div class="form-title">找回登录密码</div>
			<div class="form-subtitle">请输入绑定信息，我们会发送验证码帮助你重置密码</div>
			<form class="getpass" autocomplete="off">
				<div class="form-group">
					<label class="form-label" for="uname">注册账号</label>
					<input id="uname" type="text" name="u" class="input-field" placeholder="请输入注册账号" />
				</div>
				<div class="form-group">
					<label class="form-label" for="mobile">绑定手机号</label>
					<input id="mobile" type="tel" name="t0" maxlength="11" class="input-field" placeholder="请输入绑定手机号" />
				</div>
				<div class="form-group">
					<label class="form-label" for="code">短信验证码</label>
					<div class="input-with-action">
						<input id="code" type="text" name="t1" class="input-field" placeholder="请输入验证码" />
						<button type="button" class="code-btn" id="sendCodeBtn" onclick="sendCode()">发送验证码</button>
					</div>
				</div>
				<div class="form-group">
					<label class="form-label" for="password">新密码</label>
					<input id="password" type="password" name="t2" class="input-field" placeholder="请输入新密码" />
				</div>
				<div class="form-group">
					<label class="form-label" for="password2">确认新密码</label>
					<input id="password2" type="password" name="t3" class="input-field" placeholder="请再次输入新密码" />
				</div>
				<button class="submit-btn" type="button" onclick="submitReset()">确认重置</button>
			</form>
			<div class="extra-links">
				<span>想起密码了？</span><a href="/login.php">返回登录</a>
			</div>
		</div>
	</div>
	<script>
		var countdownTimer = null;
		var countdownSeconds = 60;
		function isValidMobile(mobile){
			return /^1\d{10}$/.test(mobile);
		}
		function startCountdown(){
			var btn = $('#sendCodeBtn');
			var timeLeft = countdownSeconds;
			btn.prop('disabled', true).text(timeLeft + '秒后重发');
			countdownTimer = setInterval(function(){
				timeLeft--;
				if(timeLeft <= 0){
					clearInterval(countdownTimer);
					btn.prop('disabled', false).text('发送验证码');
				}else{
					btn.text(timeLeft + '秒后重发');
				}
			}, 1000);
		}
		function resetCountdown(){
			if(countdownTimer){
				clearInterval(countdownTimer);
				countdownTimer = null;
			}
			$('#sendCodeBtn').prop('disabled', false).text('发送验证码');
		}
		function sendCode(){
			var mobile = $('#mobile').val().trim();
			var uname = $('#uname').val().trim();
			if(!uname){
				showToast('请输入注册账号', 'error');
				return;
			}
			if(!isValidMobile(mobile)){
				showToast('请输入正确的手机号', 'error');
				return;
			}
			$.ajax({
				type: 'post',
				dataType: 'json',
				url: '/Moudelu.php?m=m&a=czyzm',
				data: { mobile: mobile, uname: uname },
				success: function(d){
					if(d[0] == 0){
						showToast(d[1] || '发送失败', 'error');
						resetCountdown();
					}else{
						showToast(d[1] || '验证码已发送', 'success');
						startCountdown();
					}
				},
				error: function(){
					showToast('发送失败，请稍后再试', 'error');
					resetCountdown();
				}
			});
			startCountdown();
		}
		function submitReset(){
			var uname = $('#uname').val().trim();
			var mobile = $('#mobile').val().trim();
			var code = $('#code').val().trim();
			var pwd1 = $('#password').val();
			var pwd2 = $('#password2').val();
			if(!uname){
				showToast('请输入注册账号', 'error');
				return;
			}
			if(!isValidMobile(mobile)){
				showToast('请输入正确的手机号', 'error');
				return;
			}
			if(!code){
				showToast('请输入短信验证码', 'error');
				return;
			}
			if(!pwd1 || pwd1.length < 6){
				showToast('请输入至少6位的新密码', 'error');
				return;
			}
			if(pwd1 !== pwd2){
				showToast('两次输入的密码不一致', 'error');
				return;
			}
			$.ajax({
				type: 'post',
				dataType: 'json',
				url: '/Moudelu.php?m=m&a=getpwd',
				data: $('.getpass').serialize(),
				success: function(d){
					if(d[0] == 0){
						showToast(d[1] || '重置失败', 'error');
					}else{
						showToast(d[1] || '重置成功', 'success');
						setTimeout(function(){
							window.location.href = '/login.php';
						}, 1200);
					}
				},
				error: function(){
					showToast('重置失败，请稍后再试', 'error');
				}
			});
		}
	</script>
</body>
</html>